<template>
  <el-container class="flow-panel-layout">
    <el-header class="flow-panel-header">
      <div class="header-content">
        <div class="header-left">aaaa</div>
        <div class="header-right">
          <img :src="save"
               @click="handleSave" />
        </div>
      </div>
    </el-header>
    <el-container class="flow-panel-content">
      <flow-panel-libs @dragNodeStart="dragNodeStart"></flow-panel-libs>
      <el-container height="100%"
                    class="flow-panel-content-wrap">
        <flow-panel-content></flow-panel-content>
        <el-footer height="400px"
                   v-if="node_data_show"
                   class="node-footer">
          <div class="node-footer-title">
            <span>{{nodeInfo.nodeName}}-结果集</span>
            <el-icon class="node-footer-close"
                     @click="node_data_show = false">
              <circle-close />
            </el-icon>
          </div>
          <node-data :data_etl_id="data_etl_id"
                     :node="nodeInfo"></node-data>
        </el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import { computed, defineComponent, onMounted, provide, ref } from 'vue'
// import FlowPanelLibs from './flow-panel-libs.vue'
// import FlowPanelContent from './flow-panel-content.vue'
import { useStore } from 'vuex'
import run from './../../../../../assets/svg/run.svg'
import save from './../../../../../assets/svg/save.svg'
import { saveDataETL } from '../../../../../service/data_etl'
import { ElMessage } from 'element-plus'
// import NodeData from './node-data.vue'
import { CircleClose } from '@element-plus/icons'

export default defineComponent({
  name: 'MyFlowPanel',
  props: {},
  components: {
    // FlowPanelLibs,
    // FlowPanelContent,
    // NodeData,
    CircleClose,
  },
  setup(props, ctx) {
    const store = useStore()
    const dragItem = computed(() => store.state.flowEtl.dragItem)
    const data_etl_id = computed(() => store.state.flowEtl.data_etl_id)
    const flowData = computed(() => store.state.flowEtl.flowData)
    const nodeInfo = ref({})
    const node_data_show = ref(false)
    const dragNodeStart = (item) => {
      store.commit('flowEtl/set_dragItem', item)
    }
    const handleSave = () => {
      saveDataETL({
        content: JSON.stringify(flowData.value),
        data_etl_id: data_etl_id.value,
      }).then((res) => {
        ElMessage.success('保存成功')
      })
    }
    const showNodeData = (node) => {
      nodeInfo.value = node
      node_data_show.value = true
    }
    provide('showNodeData', showNodeData)
    onMounted(() => {})
    return {
      dragItem,
      run,
      save,
      data_etl_id,
      flowData,
      nodeInfo,
      node_data_show,
      showNodeData,
      dragNodeStart,
      handleSave,
    }
  },
})
</script>
<style lang="less">
.flow-panel-layout {
  height: 100vh;

  .flow-panel-header {
    height: 56px;

    .header-content {
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      align-content: center;

      .header-right {
        img {
          width: 24px;
          height: 24px;
          margin: 8px;
          cursor: pointer;
        }
      }
    }
  }

  .flow-panel-content {
    height: calc(100vh - 56px);

    .flow-panel-content-wrap {
      .n-scrollbar-content {
        height: 100%;
      }
    }

    .node-footer {
      padding: 0px;

      .node-footer-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 18px;
        font-weight: bolder;
        padding: 8px 10px 12px;
      }
    }

    .node-footer-close {
      height: 20px;
      width: 20px;
      cursor: pointer;

      svg {
        height: 20px;
        width: 20px;
      }
    }
  }
}
</style>
